<template>
  <div class="page">
    <div>
      <h1>查看全部订单列表</h1>
      <el-table :data="bannerlist1" style="width: 100%,height: 100%">
        <el-table-column prop="name" label="用户名" width="100" />
        <el-table-column prop="tel" label="用户电话" width="100" />
        <el-table-column prop="orderid" label="订单编号" width="150" />
        <el-table-column label="图片" width="100">
          <template #default="scope">
            <img class="img" :src="scope.row.img1" />
          </template>
        </el-table-column>
        <el-table-column prop="proname" label="详细介绍" width="180" />
        <el-table-column prop="originprice" label="原价" width="100" />
        <el-table-column prop="discount" label="折扣" width="100" />
        <el-table-column prop="num" label="数量" width="100" />
        <el-table-column prop="status" label="状态码" width="100" />
      </el-table>
    </div>
  </div>
</template>
    
    <script setup lang="ts">
import { reactive, ref } from "vue";
import service from "../../../utils/service";

interface ibanner {
  name: string;
  tel: string;
  orderid: string;
  proname: string;
  originprice: number;
  img1: string;
  discount: number;
  num: number;
  status: number;
}

let bannerlist1 = reactive<ibanner[]>([]);

const getbannerlist1 = () => {
  service({
    url: "http://118.178.238.19:3001/admin/order/list",
  }).then((res) => {
    if (res.data.code == "200") {
      bannerlist1.length = 0;
      // console.log(res.data.total);
      bannerlist1.push(...res.data.data);
    }
  });
};

getbannerlist1();
</script>
    
    <style scoped>
.img {
  width: 100px;
  height: 100px;
}
.page {
  width: 100%;
  height: 1000px;
}
</style>